<!-- 插入文件名 -->
<template>
  <div class="insert-name-form">
    <el-form :model="formStore">
      <el-form-item label="位置">
        <el-radio-group v-model="formStore.insertNamePosition">
          <el-radio value="0">开头</el-radio>
          <el-radio value="1">末尾</el-radio>
          <el-radio value="2">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formStore.insertNamePosition === '2'">
        <div class="sub">
          <el-icon class="icon"><Paperclip /></el-icon>
          <div class="sub-item">
            <el-form-item>
              第
              <el-input-number
                v-model="formStore.insertNameAfterCharacter"
                style="margin: 0 8px"
                size="small"
                :min="0"
              />
              个字符后
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="插入内容" label-position="top">
        <el-input
          v-model="formStore.insertNameContent"
          :rows="3"
          type="textarea"
          placeholder="请输入插入内容"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { Paperclip } from '@element-plus/icons-vue'
import useInsertNameFormStore from '@renderer/store/Form/InsertNameFormStore'

const formStore = useInsertNameFormStore()
</script>

<style lang="less" scoped>
.el-input-number--small {
  width: 90px;
}

.insert-name-form {
  .sub {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-left: 10px;

    .icon {
      position: relative;
      top: 8px;
      font-size: 16px;
      margin-right: 12px;
    }

    .sub-item {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .el-form-item {
      margin-bottom: 6px;
    }
  }
}
</style>
